<template>
    <div class="form-container">
        <el-card style="margin-left: 1000px;">
            <el-form :model="form" label-width="auto" style="max-width: 600px">
                <el-form-item label="用户名">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.passs" show-password="password" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
    name: '',
    passs: ''
})

const onSubmit = () => {
    console.log('submit!')
}
</script>

<style scoped>
.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* 使容器占满整个视口高度 */
    background-image: url('../assets/121.jpg');
    /* 确保路径正确 */
    background-size: cover;
    /* 使背景图片覆盖整个背景区域 */
    background-repeat: no-repeat;
    /* 防止背景图片重复 */
    background-position: center;
    /* 将背景图片居中 */
    height: 100vh;
    /* 使背景占据整个视口高度 */
    margin: 0;
    /* 去除默认的body外边距 */
}

.el-card {
    background-color: rgba(255, 255, 255, 0.5);
    /* 这里 0.5 表示 50% 的透明度 */
    border: none;
    /* 可选：若想去掉边框 */
    box-shadow: none;
    /* 可选：若想去掉阴影 */
}
</style>